<template>
  <div class="list-container console-list-container">
    <div style="display: flex; height: 100%">
      <div class="consoleLeftBox">
        <img src="@/assets/console_img/console2.png" class="consoleBg">
      </div>
      <div class="right">
        <div class="console-rightBox-top">
          <div class="valueContentTitle">
            平台价值
          </div>
          <div class="valueContent">
            <div class="valueContentPadding">
              <span>敏捷响应用户需求</span>
              <span class="spanRight">降低软件开发成本</span>
            </div>
            <div class="valueContentPadding">
              <span>缩短项目交付周期</span>
              <span class="spanRight">降低人员技能要求</span>
            </div>
          </div>
        </div>
        <div class="console-rightBox-center">
          <div class="valueContentTitle2">
            平台特性
          </div>
          <div class="valueContent">
            <div class="valueContentPadding">
              <span>低代码开发</span>
              <span class="spanRight">高安全性</span>
            </div>
            <div class="valueContentPadding">
              <span>支持微服务</span>
              <span class="spanRight">支持国产化</span>
            </div>
            <div class="valueContentPadding">
              <span>高性能</span>
              <span class="spanRight">...</span>
            </div>
          </div>
        </div>
        <div class="console-rightBox-bottom">
          <div class="valueContentTitle3">
            未来规划
          </div>
          <div class="valueContent">
            <div class="valueContentPadding">
              <span>三维模型</span>
              <!--                                <span class="spanRight">工业互联网</span>-->
              <span class="spanRight">行业组件</span>
            </div>
            <div class="valueContentPadding">
              <span>人工智能</span>
              <!--                                <span class="spanRight">模型驱动</span>-->
              <span class="spanRight">...</span>
            </div>
            <!--                            <div class="valueContentPadding">-->
            <!--                                <span>ECharts图表</span>-->
            <!--                                <span class="spanRight">...</span>-->
            <!--                            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  data() {
    return {
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
    .console-list-container{
        margin: -8px;
        padding: 0;
        overflow: hidden;
        background: #fff url("~@/assets/console_img/consolebg.svg") no-repeat left;
        background-size: auto 100%;
    }
    .consoleBg{
        padding-top: 9px;
        padding-bottom: 11px;
        height: 100%;
        position: relative;
        left: 156px;
    }

    .right{
        background: url("~@/assets/console_img/right.png") no-repeat right;
        background-size: 100% 100%;
        width: 42%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;
        .console-rightBox-top{
            width: 460px;
            float: right;
            padding-top: 40px;
            padding-left: 52px;
        }
        .console-rightBox-center{
            width: 460px;
            float: right;
            padding-top: 20px;
            padding-left: 52px;
        }
        .console-rightBox-bottom{
            width: 460px;
            float: right;
            padding-top: 20px;
            padding-left: 52px;
        }
    }
    .consoleLeftBox{
        height: 100%;
        width: 58%;
    }
    .valueContentTitle{
      color: #ffffff;
      height: 24px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 24px;
      padding-left: 30px;
      background-image: url("~@/assets/console_img/Purple-title-bg.svg");
      background-repeat: no-repeat;
    }
    .valueContentTitle2{
      color: #ffffff;
      height: 24px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 24px;
      padding-left: 30px;
      background-image: url("~@/assets/console_img/centerTitleBg.svg");
      background-repeat: no-repeat;
    }
    .valueContentTitle3{
      color: #ffffff;
      height: 24px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 24px;
      padding-left: 30px;
      background-image: url("~@/assets/console_img/bottomTitleBg.svg");
      background-repeat: no-repeat;
    }
    .valueContentPadding{
        padding-top: 30px;
        display: inline-flex;
        span{
            display: inline-block;
            width: 206px;
            height: 24px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 24px;
            color: #5E5E5E;
            opacity: 1;
            padding-left: 25px;
            background: url("~@/assets/console_img/blue-dot.svg") no-repeat left;
        }
        .spanRight{
            margin-left: 40px;
        }
    }
    @media screen and (max-width: 1366px) {
        .right{
            width: 48%;
        }
        .consoleLeftBox{
            width: 52%;
        }
        .consoleBg{left: 140px}
        .valueContentPadding{padding-top: 18px}
        .valueContentPadding span{
            font-size: 14px;
        }
    }
    @media screen and (max-width: 1280px) {
        .right{
            width: 46%;
        }
        .consoleLeftBox{
            width: 54%;
        }
        .consoleBg{left: 30px}
        .valueContentPadding{padding-top: 18px}
        .valueContentPadding span{
            font-size: 14px;
            width: 185px;
        }
    }
    @media screen and (max-width: 1440px) {
        .valueContentPadding span{
            font-size: 16px;
        }
        .valueContentPadding{padding-left: 18px}
    }
</style>
